<template>
  <div>
    <div class="box">
      <div v-for="item in jchd" :key="item.id">
        <img :src="item.src" />
        <h3>
          <a class="content" href="">{{ item.title }}</a>
        </h3>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      jchd:''
      // waterfallArr: [
      //   {
      //     url: "http://www.yhachina.com/data/images/2021-07-02/60de88a2cf185.jpg",
      //     title: "YHA云南夏令营 | “人与自然”（6-11岁）",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-05-21/5ec5f10aaa5b7.jpg",
      //     title: "青年旅舍第一批免费电子卡—送给谁？",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-09-18/5f6488b4da217.jpg",
      //     title: "这个周末，来深圳慈展会和我们偶遇吧",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-09-01/5f4df4133aa52.png",
      //     title: "开放征稿啦｜投稿你的旅行笔记，有小礼物等你拿",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-08-19/5f3c9b377f499.jpg",
      //     title: "青年旅舍111年，开一个线上故事会吧",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-07-28/5f1fc5fe1ee21.jpg",
      //     title: "大自然的美好, 一起分享，一起成长",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-07-16/5f100c09dca3b.jpg",
      //     title: "夏天的风轻轻吹着| 第44届世界青年营回顾",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-07-16/5f101f26274a7.png",
      //     title: "六一特辑|两天一晚自然体验营",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2020-05-21/5ec5f60f7dfdd.png",
      //     title: "世界地球日 | 环保大让利，“以旧代金”去青年旅舍消费吧！",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2019-08-07/5d4a4b1867488.png",
      //     title: "下一站，努沙 - 青年旅舍来买单！",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2019-07-24/5d37e0c6d7331.jpg",
      //     title: "暑期研学旅行招募 | 14天带你探访古老又现代的德国",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2019-04-04/5ca564dfc1255.JPG",
      //     title: "世界青年营“早鸟价”最后1天，现在报名还你一个难忘的暑假！",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2019-04-04/5ca560d80b4f5.jpg",
      //     title: "招募 | 韩国“世界青年营”又来啦，今年我们去看世界文化遗产！",
      //   },
      //   {
      //     url: "http://www.yhachina.com/data/images/2018-08-21/5b7badf7ec35b.jpg",
      //     title: "明知山有釜，偏向釜山行 | 2018韩国“世界青年营”回顾二",
      //   },
      // ],
    };
  },
  methods: {
    getData(){
        const url='http://127.0.0.1:3000/v2/qnls/jchd'
        this.axios.get(url).then(res=>{
          console.log(res);
          this.jchd=res.data.data
          console.log(this.jchd);
        })
      }
  },
  created () {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  width: 810px;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    background-color: #fff;
    width: 255px;
    padding: 14px;
    font-size: 8px;
    box-sizing: border-box;
    margin: 0 0 10px 0;
    border-radius: 6px;
    img {
      width: 100%;
      display: block;
      height: auto;
      padding-bottom: 14px;
      &:hover {
        cursor: pointer;
      }
    }
    h3 {
      a {
        color: #333333;
        text-decoration: none;
      }
    }
  }
}
</style>